<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>亿鼎后台管理系统</title>

    <link rel="stylesheet" href="/dist/layui/css/layui.css">
    <link rel="stylesheet" href="/css/common.css">

    <!-- icon -->
    <link rel="icon" href="/image/icon/logo_16x16.svg" type="image/x-icon">
    <link rel="shortcut icon" href="/image/icon/logo_48x48.svg" type="image/x-icon">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo"><span class="layui-icon layui-icon-template-1"></span>&nbsp;亿鼎后台系统</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="https://portrait.gitee.com/uploads/avatars/user/772/2318747_warhorse-horse_1578971786.png"
                         class="layui-nav-img">
                    admin
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">基本资料</a></dd>
                    <dd><a href="">安全设置</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="/logout">登出系统</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="side-nav">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;"><span class="layui-icon layui-icon-set"></span>&nbsp;系统设置</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;"><span class="layui-icon layui-icon-user"></span>&nbsp;用户管理</a></dd>
                        <dd><a href="javascript:;"><span class="layui-icon layui-icon-group"></span>&nbsp;角色管理</a></dd>
                        <dd><a href="javascript:;"><span class="layui-icon layui-icon-senior"></span>&nbsp;权限管理</a></dd>
                        <dd><a href="javascript:;"><span class="layui-icon layui-icon-console"></span>&nbsp;SQL监控</a>
                        </dd>
                    </dl>
                </li>
                <li class="layui-nav-item layui-this"><a href="javascript:;"><span
                        class="layui-icon layui-icon-file-b"></span>&nbsp;订单管理</a>
                </li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div class="layui-col-md12">
            <div class="layui-collapse">
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">检索条件</h2>
                    <!--
                    检索条件：
                    id(精准搜索)
                    标题(模糊搜索)
                    品牌(模糊搜索)    TODO 后期如果加入品牌管理需求则更改为品牌下拉框
                    状态(下拉框)
                    -->
                    <div class="layui-colla-content layui-show">
                        <form class="layui-form query-form" action="">
                            <!-- 第一行 -->
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label" for="queryId">ID</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="queryId" id="queryId" lay-verify="number"
                                               autocomplete="off" class="layui-input" placeholder="输入ID进行精准搜索">
                                    </div>
                                </div>

                                <div class="layui-inline">
                                    <label class="layui-form-label" for="queryOrderId">订单编号</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="queryOrderId" id="queryOrderId" autocomplete="off"
                                               class="layui-input" placeholder="输入订单编号进行精准搜索">
                                    </div>
                                </div>

                                <div class="layui-inline">
                                    <label class="layui-form-label" for="queryTitle">标题</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="queryTitle" id="queryTitle" autocomplete="off"
                                               class="layui-input" placeholder="输入标题进行模糊搜索">
                                    </div>
                                </div>

                                <div class="layui-inline">
                                    <label class="layui-form-label" for="queryBrand">品牌</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="queryBrand" id="queryBrand" autocomplete="off"
                                               class="layui-input" placeholder="输入品牌进行模糊搜索">
                                    </div>
                                </div>
                            </div>

                            <!-- 第二行 -->
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label" for="queryStatus">状态</label>
                                    <div class="layui-input-inline">
                                        <select name="queryStatus" id="queryStatus" lay-filter="queryStatusFlt">
                                            <option value="-1">全部</option>
                                            <option value="0">未完成</option>
                                            <option value="1">已完成</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <!-- TODO 点击搜索时，封装表单数据，发送到/info/orders/query,GET请求，获得数据之后数据表格orderTableFlt重新实例化 -->
                                    <button type="submit" class="layui-btn" lay-submit="" lay-filter="searchBtn">搜索
                                    </button>
                                    <!-- TODO 点击重置按钮时进行数据刷新 -->
                                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header">订单信息</div>
                <div class="layui-card-body">
                    <!-- 数据表格 -->
                    <table class="layui-hide" id="orderTable" lay-filter="orderTableFlt"></table>
                </div>
            </div>
        </div>
    </div>

    <div class=" layui-footer">
        <!-- 底部固定区域 -->
        © War horse 2020 <a href="https://gitee.com/warhorse-horse" class="social-media-link" target="_blank">Gitee</a>
        |
        <a href="mailto:imwarhorse@aliyun.com" class="social-media-link">联系我</a>
    </div>
</div>

<div id="orderDetailsFrame" style="display: none; padding: 10px">
    <form class="layui-form" id="orderDetailsForm" lay-filter="orderDetailsForm">
        <div class="layui-form-item">
            <label class="layui-form-label" for="name">名称：</label>
            <div class="layui-input-block">
                <input type="text" name="name" id="name" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" for="orderId">订单编号：</label>
            <div class="layui-input-block">
                <input type="text" name="orderId" id="orderId" autocapitalize="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" for="createTime">订单时间：</label>
            <div class="layui-input-block">
                <input type="text" name="createTime" id="createTime" autocapitalize="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" for="customerName">您的姓名：</label>
            <div class="layui-input-block">
                <input type="text" name="customerName" id="customerName" autocapitalize="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" for="customerPhone">您的电话：</label>
            <div class="layui-input-block">
                <input type="text" name="customerPhone" id="customerPhone" autocapitalize="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" for="customerCity">您的城市：</label>
            <div class="layui-input-block">
                <input type="text" name="customerCity" id="customerCity" autocapitalize="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" for="customerAddress">详细地址：</label>
            <div class="layui-input-block">
                <input type="text" name="customerAddress" id="customerAddress" autocapitalize="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" for="status">订单状态：</label>
            <div class="layui-input-block">
                <select name="status" lay-filter="status" id="status">
                    <option value="0">未完成</option>
                    <option value="1">已完成</option>
                    <option value="2">未知状态</option>
                </select>
            </div>
        </div>
    </form>
</div>

<script type="text/html" id="titleTpl">
    <div class="order-item-title">{{ d.customerPhone }}</div>
</script>
<script type="text/html" id="orderListBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script src="/dist/layui/layui.js"></script>
<script src="/js/main.js"></script>

<script type="text/html" id="statusTpl">
    {{# if (d.status == 0) { }}
    <span style="color: #FFB800">未完成</span>
    {{# } else if (d.status == 1) { }}
    <span style="color: #5FB878">已完成</span>
    {{# } else { }}
    <span style="color: #FF5722">未知状态</span>
    {{# } }}
</script>
</body>
</html>